<template>
    <div>
        <el-form :inline="true" size="small">
            <el-form-item label="字典名称">
                <el-input v-model="dictonaryName" placeholder="请输入内容"></el-input>
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="getDictListData" icon="el-icon-search" size='small'>查询</el-button>
                <el-button type="primary" @click="handleAddDictionary()" icon="el-icon-plus" size='small' >添加字典</el-button>
            </el-form-item>  
        </el-form>
        <div class="list-box1">
            <el-table :data="dictSelect" style="width: 100%" height="calc(100vh - 280px)" border>
              <el-table-column prop="name" label="字典名称" align="center"></el-table-column>
              <el-table-column prop="historyVersion" label="版本" align="center"></el-table-column>
              <el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
              <el-table-column label="操作" align="center" width="200">
              <template slot-scope="scope">
                <el-tooltip content="版本信息" placement="top">
                    <el-button 
                    type="warning" 
                    icon="el-icon-tickets" 
                    size="mini" 
                    @click="handleHistoryDialog(scope.row)"
                    />
                </el-tooltip>

                <el-tooltip content="新增版本" placement="top">
                    <el-button 
                    type="primary" 
                    icon="el-icon-plus" 
                    size="mini" 
                    @click="handleAddVersion(scope.row)"
                    />
                </el-tooltip>

                <el-tooltip content="字典更名" placement="top">
                    <el-button 
                    type="success" 
                    icon="el-icon-edit" 
                    size="mini" 
                    @click="handleAddDictionary(scope.row)"
                    />
                </el-tooltip>

                <el-tooltip content="删除字典" placement="top">
                    <el-button 
                    type="danger" 
                    icon="el-icon-delete" 
                    size="mini" 
                    @click="handleDelDictionary(scope.row)"
                    />
                </el-tooltip>
              </template>
              </el-table-column>
          </el-table>
        </div>


        <!-- 弹窗部分 -->
        <el-dialog  title="历史版本管理"  :visible.sync="historyVisible"   width="80%"  v-dialogDrag>
            <div class="dialog-content">
                <div class="table-header">
                    <div class="total-count">共 {{ historyList.length }} 个版本</div>
                    <div class="filter-options">
                        <el-radio-group v-model="filterType" size="small">
                            <el-radio-button label="all">全部版本</el-radio-button>
                            <el-radio-button label="release">正式版</el-radio-button>
                            <el-radio-button label="draft">草稿版</el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
                <el-table  :data="filteredHistoryList"  height="500"  border
                    stripe class="version-table">
                    <el-table-column  prop="versionName"  label="版本号"  align="center"  width="120">
                    <template slot-scope="scope">
                        <el-tag 
                        :type="scope.row.isRelease == 1 ? 'success' : 'info'" 
                        size="small"
                        effect="dark"
                        >
                        {{ scope.row.versionName }}
                        </el-tag>
                    </template>
                    </el-table-column>
                    
                    <el-table-column  prop="explain" label="版本发行说明" 
                    align="left">
                    <template slot-scope="scope">
                        <div class="version-desc">
                        {{ scope.row.explain || '暂无说明' }}
                        </div>
                    </template>
                    </el-table-column>
                    
                    <el-table-column  prop="isRelease"  label="版本类型" 
                    align="center"  width="100">
                    <template slot-scope="scope">
                        <el-badge 
                        is-dot 
                        :type="scope.row.isRelease == 1 ? 'success' : 'warning'"
                        >
                        <span :class="['version-type', scope.row.isRelease == 1 ? 'release' : 'draft']">
                            {{ scope.row.isRelease == 1 ? '正式版' : '草稿' }}
                        </span>
                        </el-badge>
                    </template>
                    </el-table-column>
                    
                    <el-table-column  prop="updateTime" label="更新时间" 
                    align="center" width="160">
                    <template slot-scope="scope">
                        <div class="update-time">
                        <i class="el-icon-time"></i>
                        {{scope.row.updateTime}}
                        </div>
                    </template>
                    </el-table-column>
                    
                    <el-table-column  label="操作"   align="center"  width="280">
                    <template slot-scope="scope">
                        <div class="action-buttons">
                        <el-tooltip content="预览版本" placement="top">
                            <el-button 
                            type="primary" 
                            icon="el-icon-view" 
                            size="mini" 
                            @click="handleViewHistory(scope.row)"
                            />
                        </el-tooltip>
                        
                        <el-tooltip content="复制版本" placement="top" >
                            <el-button 
                            type="warning" 
                            icon="el-icon-document-copy" 
                            size="mini" 
                            @click="handleCopyHistory(scope.row)"
                            />
                        </el-tooltip>
                        
                        <el-tooltip content="编辑版本" placement="top" v-if="scope.row.isRelease == 0">
                            <el-button 
                            type="info" 
                            icon="el-icon-edit" 
                            size="mini" 
                            @click="handleVersionDetail(scope.row)"
                            />
                        </el-tooltip>
                        
                        <el-tooltip content="发布版本" placement="top" v-if="scope.row.isRelease == 0">
                            <el-button 
                            type="success" 
                            icon="el-icon-upload" 
                            size="mini" 
                            @click="handleVersionRelease(scope.row)"
                            />
                        </el-tooltip>
                        
                        <el-tooltip content="删除版本" placement="top" v-if="scope.row.isRelease == 0">
                            <el-button 
                            type="danger" 
                            icon="el-icon-delete" 
                            size="mini" 
                            @click="handleVersionDel(scope.row)"
                            />
                        </el-tooltip>
                        </div>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>

        <el-dialog  title="数据字典预览" :visible.sync="viewVisible" 
            width="80%" v-dialogDrag :close-on-click-modal="false">
            <div class="preview-content" v-if="addVersionType == 1 && versionDataView.tables">
            <!-- 头部信息 -->
            <div class="preview-header">
                <div class="version-info">
                <span class="version-tag">版本预览</span>
                <h3 class="version-name">{{ versionDataView.versionName || '未命名版本' }}</h3>
                <p class="version-desc" v-if="versionDataView.explain">{{ versionDataView.explain }}</p>
                </div>
                <div class="table-count">
                共 {{ versionDataView.tables.length }} 张数据表
                </div>
            </div>

            <!-- 主要内容区域 -->
            <div class="diction-container">
                <!-- 左侧表列表 -->
                <div class="diction-left">
                <div class="table-list-header">
                    <span>数据表列表</span>
                    <el-tooltip content="点击表名查看详情" placement="top">
                    <i class="el-icon-info"></i>
                    </el-tooltip>
                </div>
                <div class="table-menu">
                    <div v-for="(item, index) in versionDataView.tables" 
                    :key="index" :class="['table-item', currentTab == index ? 'active' : '']" @click="handleChangeIndex(index)"
                    >
                    <div class="table-icon">
                        <i class="el-icon-s-grid"></i>
                    </div>
                    <div class="table-info">
                        <div class="table-name">{{ item.tableName }}</div>
                        <div class="table-name-cn" :title="item.tableNameCn">
                        {{ item.tableNameCn || '无中文名' }}
                        </div>
                    </div>
                    <div class="table-columns">
                        <el-tag size="mini">{{ item.columns ? item.columns.length : 0 }} 列</el-tag>
                    </div>
                    </div>
                </div>
                </div>

                <!-- 右侧表详情 -->
                <div class="diction-right">
                <div class="table-detail-header">
                    <h4 class="current-table-name">
                    {{ currentTable.tableName }} 
                    <span class="table-name-cn" v-if="currentTable.tableNameCn">
                        ({{ currentTable.tableNameCn }})
                    </span>
                    </h4>
                    <div class="table-stats">
                    <el-tag size="small" type="info">
                        共 {{ currentTable.columns ? currentTable.columns.length : 0 }} 个字段
                    </el-tag>
                    <el-tag size="small" type="success">
                        主键: {{ primaryKeyCount }} 个
                    </el-tag>
                    <el-tag size="small" type="warning">
                        时间列: {{ timeColumnCount }} 个
                    </el-tag>
                    </div>
                </div>

                <el-table 
                    :data="currentTable.columns" 
                    style="width: 100%" 
                    height="500" 
                    border
                    stripe
                    highlight-current-row
                    class="column-table"
                    v-if="currentTable.columns && currentTable.columns.length > 0"
                >
                    <el-table-column 
                    prop="columnName" 
                    label="列名" 
                    align="center"
                    width="150"
                    fixed
                    >
                    <template slot-scope="scope">
                        <span class="column-name">{{ scope.row.columnName }}</span>
                    </template>
                    </el-table-column>
                    
                    <el-table-column 
                    prop="dataType" 
                    label="数据类型" 
                    align="center"
                    width="120"
                    >
                    <template slot-scope="scope">
                        <el-tag size="small" effect="plain">{{ scope.row.dataType }}</el-tag>
                    </template>
                    </el-table-column>
                    
                    <el-table-column 
                    prop="columnNameCn" 
                    label="列说明" 
                    align="left"
                    min-width="180"
                    >
                    <template slot-scope="scope">
                        <div class="column-comment">
                        {{ scope.row.columnNameCn || '暂无说明' }}
                        </div>
                    </template>
                    </el-table-column>
                    
                    <el-table-column 
                    prop="isPk" 
                    label="主键" 
                    align="center"
                    width="80"
                    >
                    <template slot-scope="scope">
                        <el-tag 
                        :type="scope.row.isPk == 1 ? 'success' : 'info'" 
                        size="small"
                        effect="dark"
                        >
                        {{ scope.row.isPk == 1 ? '是' : '否' }}
                        </el-tag>
                    </template>
                    </el-table-column>
                    
                    <el-table-column 
                    prop="isTime" 
                    label="时间列" 
                    align="center"
                    width="80"
                    >
                    <template slot-scope="scope">
                        <el-tag 
                        :type="scope.row.isTime == 1 ? 'warning' : 'info'" 
                        size="small"
                        effect="dark"
                        >
                        {{ scope.row.isTime == 1 ? '是' : '否' }}
                        </el-tag>
                    </template>
                    </el-table-column>
                    
                    <el-table-column 
                    label="其他属性" 
                    align="center"
                    width="120"
                    >
                    <template slot-scope="scope">
                        <div class="column-attributes">
                        <el-tooltip content="可为空" placement="top" v-if="scope.row.nullable">
                            <i class="el-icon-circle-check"></i>
                        </el-tooltip>
                        <el-tooltip content="唯一约束" placement="top" v-if="scope.row.unique">
                            <i class="el-icon-lock"></i>
                        </el-tooltip>
                        </div>
                    </template>
                    </el-table-column>
                </el-table>

                <div class="empty-state" v-else>
                    <el-empty description="该表暂无字段信息"></el-empty>
                </div>
                </div>
            </div>
            </div>
        </el-dialog>

        <el-dialog 
            :title="`${versionEdit ? '编辑' : '新增'}数据字典版本`" 
            :visible.sync="addVersionVisible" 
            width="1100px" 
            :before-close="handleCanCelVersionTable" 
            v-dialogDrag
            class="version-dialog"
        >
            <div class="dialog-content">
            <!-- 基本信息区域 -->
            <div class="basic-info-compact">
                <el-form ref="Form" :model="versionData" size="small" class="compact-form" label-width="80px">
                <el-row :gutter="15">
                    <el-col :span="8">
                    <el-form-item label="字典名称">
                        <span class="dict-name">{{ versionDataName }}</span>
                    </el-form-item>
                    </el-col>
                    <el-col :span="8">
                    <el-form-item label="版本号" prop="versionName" required>
                        <el-input 
                        v-model="versionData.versionName" 
                        placeholder="x.y.z" 
                        size="small"
                        ></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="8">
                    <el-form-item label="创建方式">
                        <el-radio-group v-model="addVersionType" size="small">
                            <el-radio-button :label="1">手动录入</el-radio-button>
                            <el-radio-button :label="2">数据库载入</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="发行说明">
                    <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="简要描述版本变更内容"
                    v-model="versionData.explain"
                    size="small"
                    maxlength="200"
                    show-word-limit
                    ></el-input>
                </el-form-item>
                </el-form>
            </div>

            <!-- 手动录入方式 -->
            <div class="data-section" v-if="addVersionType == 1">
                <div class="diction-container">
                <!-- 左侧表列表 -->
                <div class="table-list-panel">
                    <div class="panel-header">
                    <span>数据表</span>
                    <el-button 
                        type="primary" 
                        icon="el-icon-plus" 
                        size="mini" 
                        @click="handleAddTableMenu()"
                    >
                        新增表
                    </el-button>
                    </div>
                    <div class="table-list">
                    <div 
                        v-for="(item, index) in versionData.tables" 
                        :key="index"
                        :class="['table-item', currentTab == index ? 'active' : '']"
                        @click="handleChangeIndex(index)"
                    >
                        <div class="table-info">
                        <div class="table-name">{{ item.tableName || '未命名表' }}</div>
                        <div class="table-desc">{{ item.tableNameCn || '无描述' }}</div>
                        </div>
                        <div class="table-actions">
                        <el-tooltip content="编辑" placement="top">
                            <el-button 
                            icon="el-icon-edit" 
                            size="mini" 
                            circle 
                            @click.stop="handleAddTableMenu(item, index)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip content="复制" placement="top">
                            <el-button 
                            icon="el-icon-document-copy" 
                            size="mini" 
                            circle 
                            @click.stop="handleCopyTableMenu(item, index)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button 
                            icon="el-icon-delete" 
                            size="mini" 
                            circle 
                            type="danger"
                            @click.stop="handleDelTableMenu(index)"
                            ></el-button>
                        </el-tooltip>
                        </div>
                    </div>
                    <div class="empty-tips" v-if="!versionData.tables || versionData.tables.length === 0">
                        <el-empty description="暂无数据表" :image-size="60"></el-empty>
                    </div>
                    </div>
                </div>

                <!-- 右侧字段管理 -->
                <div class="field-management-panel">
                    <div class="panel-header" v-if="versionData.tables && versionData.tables.length > 0">
                    <span>字段管理</span>
                    <el-button 
                        type="primary" 
                        icon="el-icon-plus" 
                        size="mini" 
                        @click="handleAddVersionTable"
                    >
                        新增字段
                    </el-button>
                    </div>
                    
                    <div class="field-table" v-if="versionData.tables && versionData.tables.length > 0">
                    <el-table 
                        :data="versionData.tables[currentTab].columns"
                        height="380" 
                        border 
                        stripe
                        size="small"
                        class="custom-table"
                    >
                        <el-table-column label="列名" align="center">
                        <template slot-scope="scope">
                            <el-input 
                            v-model="scope.row.columnName" 
                            placeholder="列名" 
                            size="small"
                            ></el-input>
                        </template>
                        </el-table-column>
                        
                        <el-table-column label="数据类型" align="center">
                        <template slot-scope="scope">
                            <el-select 
                            v-model="scope.row.dataType" 
                            placeholder="类型" 
                            size="small"
                            class="type-select"
                            >
                            <el-option
                                v-for="item in dbTypeList"
                                :key="item"
                                :label="item"
                                :value="item"
                            ></el-option>
                            </el-select>
                        </template>
                        </el-table-column>
                        
                        <el-table-column label="表中文名" >
                        <template slot-scope="scope">
                            <el-input 
                            v-model="scope.row.columnNameCn" 
                            placeholder="中文名" 
                            size="small"
                            ></el-input>
                        </template>
                        </el-table-column>
                        
                        <el-table-column label="主键"  align="center">
                        <template slot-scope="scope">
                            <el-switch
                            v-model="scope.row.isPk"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#13ce66"
                            @change="handleChangePk(scope.$index, scope.row.isPk)"
                            ></el-switch>
                        </template>
                        </el-table-column>
                        
                        <el-table-column label="时间列" align="center">
                        <template slot-scope="scope">
                            <el-switch
                            v-model="scope.row.isTime"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#13ce66"
                            @change="handleChangeTime(scope.$index, scope.row.isTime)"
                            ></el-switch>
                        </template>
                        </el-table-column>
                        
                        <el-table-column label="操作"  align="center" >
                        <template slot-scope="scope">
                            <el-link 
                            type="danger" 
                            icon="el-icon-delete" 
                            size="mini" 
                            :underline="false"
                            @click="handleDelVersion(scope.$index)"
                            >移除</el-link>
                        </template>
                        </el-table-column>
                    </el-table>
                    </div>
                    
                    <div class="empty-panel" v-else>
                    <el-empty description="请先添加数据表" :image-size="80"></el-empty>
                    </div>
                </div>
                </div>
            </div>

            <!-- 数据库载入方式 -->
            <div class="data-section" v-if="addVersionType == 2">
                <div class="diction-container">
                <!-- 左侧数据库选择 -->
                <div class="database-select-panel">
                    <div class="panel-header">数据库选择</div>
                    <div class="select-group">
                    <el-select 
                        v-model="versionSearchData.tableName" 
                        placeholder="选择数据库" 
                        size="small"
                        @change="handleChangedataBase"
                        class="db-select"
                    >
                        <el-option
                        v-for="item in databaseVersion"
                        :key="item.id"
                        :label="`${item.dbName} -- ${item.alias}`"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                    
                    <el-select 
                        v-model="versionSearchData.schemaId" 
                        placeholder="选择模式" 
                        size="small"
                        @change="handleChangedataSchemas"
                        class="schema-select"
                    >
                        <el-option
                        v-for="item in dataBaseSchemas"
                        :key="item.schemaId"
                        :label="item.schemaName"
                        :value="item.schemaId"
                        ></el-option>
                    </el-select>
                    </div>
                    
                    <div class="tree-panel">
                    <div class="tree-header">数据表列表（可多选）</div>
                    <el-tree
                        :data="versionData1"
                        :props="{label: 'tableName', children: 'children'}"
                        show-checkbox
                        @check-change="handleCheckChange"
                        @node-click="handleTreeNodeClick"
                        class="data-tree"
                        node-key="id"
                        size="small"
                    ></el-tree>
                    </div>
                </div>

                <!-- 右侧字段预览 -->
                <div class="field-preview-panel">
                    <div class="panel-header">
                    <span>字段管理</span>
                    </div>
                    
                    <div class="preview-content" v-if="versionData1.length >0 && versionData1[currentTab1].columns && versionData1[currentTab1].columns.length > 0">
                    <el-table 
                        :data="versionData1[currentTab1].columns" 
                        height="380" 
                        border 
                        stripe
                        size="small"
                        class="preview-table"
                    >
                        <el-table-column prop="columnName" label="列名"  align="center"></el-table-column>
                        <el-table-column prop="dataType" label="数据类型"  align="center"></el-table-column>
                        <el-table-column label="主键" align="center">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.isPk == 1" type="success" size="small">是</el-tag>
                            <el-tag v-else type="info" size="small">否</el-tag>
                        </template>
                        </el-table-column>
                        <el-table-column label="时间列" align="center">
                        <template slot-scope="scope">
                            <el-switch
                            v-model="scope.row.isTime"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#13ce66"
                            size="small"
                            @change="handleChangeTime1(scope.$index, scope.row.isTime)"
                            ></el-switch>
                        </template>
                        </el-table-column>
                        <el-table-column prop="columnNameCn" label="备注" ></el-table-column>
                        <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button 
                            type="danger" 
                            icon="el-icon-delete" 
                            size="mini" 
                            circle
                            @click="handleDelVersion1(scope.$index)"
                            ></el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    </div>
                    
                    <div class="empty-preview" v-else>
                    <el-empty description="请先选择数据库和模式" :image-size="80"></el-empty>
                    </div>
                </div>
                </div>
            </div>
            </div>
            <div class="dialog-footer">
            <el-button @click="handleCanCelVersionTable" size="small" icon="el-icon-close" class="cancel-btn">取消</el-button>
            <el-button 
                type="primary" 
                @click="handleSaveVersionTable" 
                size="small" 
                icon="el-icon-check"
                class="confirm-btn"
            >
                保存配置
            </el-button>
            </div>
        </el-dialog>

        <el-dialog title="新增表" :visible.sync="tableVersionVisble" width="400px" :before-close="handleCloseTableMenu" v-dialogDrag>
        <el-form ref="Form" :model="tableMenuForm" label-width="90px" size="medium">
          <el-form-item label="表名" required>
            <el-input v-model="tableMenuForm.tableName" placeholder="请输入表名"></el-input>
          </el-form-item>
          <el-form-item label="表中文名" required>
            <el-input v-model="tableMenuForm.tableNameCn" placeholder="请输入表中文名"></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="handleCloseTableMenu" icon="el-icon-close" size="small" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="handleSaveTableMenu" icon="el-icon-check" size="small" class="confirm-btn">保存配置</el-button>
        </div>
      </el-dialog>

      <el-dialog title="版本号" :visible.sync="versionNumVisible" width="500px" v-dialogDrag>
        <el-form ref="Form"  label-width="90px" size="medium" inline>
          <el-form-item label="版本号">
            <el-input v-model="versionNumData.versionName" placeholder="请输入" style="width:360px"></el-input>
            <p style="color:#f00;font-size: 12px;"><i class="el-icon-info"></i>请修改版本号</p>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="versionNumVisible = false" icon="el-icon-close" size="small" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="handleSaveVersionNum" icon="el-icon-check" size="small" class="confirm-btn">保存配置</el-button>
        </div>
      </el-dialog>

      <el-dialog title="字典设置" :visible.sync="dialogNameVisible" width="500px" :before-close="handleCloseDictionaryDialog" v-dialogDrag>
        <el-form ref="Form"  label-width="90px" size="medium" inline>
          <el-form-item label="字典名称">
            <el-input v-model="dictionaryDialogName" placeholder="请输入" style="width:360px"></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="handleCloseDictionaryDialog" icon="el-icon-close" size="small" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="handleSaveNameData" icon="el-icon-check" size="small" class="confirm-btn">保存配置</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import {DictList,DictListDel,DictVersionList,versionDetail,DBlist,versionSave,DbtableTales,DbtableTableColumns,dbConfig,versionRelease,versionDel,DictListEdit,DictListAdd } from '@/api/https'
export default ({
    data() {
        return{
            dictonaryName:'',
            dictSelect:[],
            filterType: 'all',
            loading: false,
            historyVisible:false,
            historyID:'',
            versionDataName:'',
            historyList:[],
            versionDataView:{},
            viewVisible:false,
            addVersionType:1,
            currentTab: 0,
            versionData:{},
            addVersionVisible:false,
            databaseVersion:[],
            versionEdit:false,
            versionSearchData:{},
            versionData1:[],
            dataBaseSchemas:[],
            currentTab1:0,
            tableVersionVisble:false,
            tableMenuForm:{},
            editTableMenu:false,
            dbTypeList:[],
            versionNumVisible:false,
            versionNumData:{},
            editDataID:'',
            dialogNameVisible:false,
            dictionaryDialogName:''
        }   
    },
    mounted(){
        this.getDictListData()
        this.getConfig()
    },
    computed: {
        filteredHistoryList() {
            if (this.filterType === 'all') return this.historyList;
            if (this.filterType === 'release') return this.historyList.filter(item => item.isRelease == 1);
            if (this.filterType === 'draft') return this.historyList.filter(item => item.isRelease == 0);
            return this.historyList;
        },
        currentTable() {
            return this.versionDataView.tables && this.versionDataView.tables.length > 0 
            ? this.versionDataView.tables[this.currentTab] 
            : { columns: [] };
        },
        primaryKeyCount() {
            return this.currentTable.columns 
            ? this.currentTable.columns.filter(col => col.isPk == 1).length 
            : 0;
        },
        timeColumnCount() {
            return this.currentTable.columns 
            ? this.currentTable.columns.filter(col => col.isTime == 1).length 
            : 0;
        }
    },
    methods:{
        getDictListData(){
          DictList({
            page:1,
            size:500,
            keyword:this.dictonaryName
          }).then(res=>{
            if(res.code == 200){
              this.dictSelect = res.data.list
            }
          })
        },
        getConfig(){
          dbConfig().then(res=>{
            if(res.code == 200){
              this.dbTypeList = res.data.dbDataType
            }
          })
        },
        handleDelDictionary(data){
            this.$confirm(`确认删除名称为${data.name}的字典及下属所有版本信息？`,'提示',{
                type:'warning'
            }).then(() => {
                DictListDel({
                    id:data.id
                }).then(res=>{
                    if(res.code == 200){
                        this.keyword = ''
                        this.getDictListData()
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            }).catch(() => {});  
        },
        handleHistoryDialog(data){
          this.historyVisible = true
          this.historyID = data.id
          this.versionDataName = data.name
          this.getHistoryList()
        },
        getHistoryList(){
          DictVersionList({
            page:1,
            size:50,
            id:this.historyID
          }).then(res=>{
            if(res.code == 200){
              this.historyList = res.data.list
            }else{
              this.historyList = []
            }
          })
        },
        handleViewHistory(data){
          versionDetail({
            dictVersionId:data.id
          }).then(res=>{
            if(res.code == 200){
              this.versionDataView = {...res.data}
              this.viewVisible = true
            }else{
              this.$message.error(res.msg)
            }
          })
        },
        handleChangeIndex(index) {
            this.currentTab = index;
        },
        handleAddVersion(data){
            this.versionData = {
                tables:[],
                dictId:data.id,
            }
            this.versionDataName = data.name
            this.addVersionVisible = true
            DBlist({
                basinId:'',
                stationId:'',
                dbType:'',
                page:1,
                size:500
            }).then(res=>{
                if(res.code == 200){
                    this.databaseVersion = res.data.list
                }
            })
        },
        handleCanCelVersionTable(){
          this.addVersionVisible = false
          this.addVersionType = 1
          this.versionData1 = []
          this.versionData = {tables:[]}
        },
        handleSaveVersionTable(){
          let onOff = true
          const arrayConcat = [...this.versionData.tables]
          if(this.versionData.tables && this.versionData.tables.length > 0 && onOff){
            this.versionData.tables.forEach((item,index)=>{
              if(item.columns && item.columns.length > 0 && onOff){
                item.columns.forEach((sub,subIndex)=>{
                  if((sub.columnName == '' || sub.dataType == '') && onOff){
                    this.$message.error('请补全字段')
                    onOff = false
                    return false
                  }
                })
              }else{
                return false
              }
            })
          }
          if(onOff){
            if(this.versionData1.length > 0){
                this.versionData1.forEach(item=>{
                    if(item.columns && item.columns.length > 0){
                        arrayConcat.push(item)
                    }
                })
            }   
            const _d = {...this.versionData}
            _d.tables = [...arrayConcat]
            versionSave(_d).then(res=>{
              if(res.code == 200){
                this.getDictListData()
                this.handleCanCelVersionTable()
              }else{
                this.$message.error(res.msg)
              }
            })
          }
        },
        handleChangedataBase(val){
            const _data = {...this.versionSearchData}
            _data.schemaId = ''
            this.databaseVersion.forEach(item=>{
                if(item.id == val){
                    this.dataBaseSchemas = item.dbSchemas || []
                }
            })
            this.versionSearchData = {..._data}
        },
        handleChangedataSchemas(val){
            DbtableTales({
                schemaId:this.versionSearchData.schemaId
            }).then(res=>{
                if(res.code == 200){
                    const list = []
                    res.data.forEach(item=>{
                        list.push({
                            tableName:item.name,
                            tableNameCn:item.remark,
                            columns:[]
                        })
                    })
                    this.versionData1 = [...list]
                }else{
                    this.versionData1 = []
                    this.$message.error(res.msg)
                }
            })
        },
        handleCheckChange(data,checked){
            const index = this.versionData1.findIndex(item => item.tableName === data.tableName);
            if(checked){
                DbtableTableColumns({
                    schemaId:this.versionSearchData.schemaId,
                    tableName:data.tableName
                }).then(res=>{
                    if(res.code == 200){
                        const list = []
                        res.data.forEach(item=>{
                            list.push({
                                columnName:item.name,
                                dataType:item.type,
                                columnNameCn:item.remark,
                                isPk:item.primaryKey ? 1 : 0,
                                isTime:item.isTime,
                            })
                        })
                        this.versionData1[index].columns = [...list]
                    }else{
                        this.versionData1[index].columns = []
                    }
                })
                
            }else{
                this.versionData1[index].columns = []
            }
            this.currentTab1 = index
        },
        handleTreeNodeClick(data){
            const index = this.versionData1.findIndex(item => item.tableName === data.tableName);
            this.currentTab1 = index
        },
        handleCloseTableMenu(){
          this.tableVersionVisble = false
          this.tableMenuForm = {}
          this.editTableMenu = false
        },
        handleAddTableMenu(data,index){
          if(data){
            this.editTableMenu = true
            this.currentTab = index
            this.tableMenuForm = {...data}
          }else{
            this.editTableMenu = false
            this.tableMenuForm = {
              columns:[]
            }
          }
          this.tableVersionVisble = true
        },
        handleSaveTableMenu(){
          if(!this.tableMenuForm.tableName){
            this.$message.error('请输入表名')
            return false
          }
          if(!this.tableMenuForm.tableNameCn){
            this.$message.error('请输入表中文名')
            return false
          }
          if(this.editTableMenu){
            this.versionData.tables[this.currentTab] = {...this.tableMenuForm}
          }else{
            this.versionData.tables.push(this.tableMenuForm)
          }
          this.handleCloseTableMenu()
        },
        handleAddVersionTable(){
          const data = this.versionData.tables[this.currentTab].columns
          data.push({
            columnName:'',
            columnNameCn:'',
            dataType:'', 
            isPk:0,
            isTime:0
          })
        },
        handleDelVersion(index){
          this.versionData.tables[this.currentTab].columns.splice(index,1)
        },
        handleDelVersion1(index){
            this.versionData1[this.currentTab1].columns.splice(index,1)
        },
        handleCopyHistory(data){
            versionDetail({
                dictVersionId:data.id
            }).then(res=>{
                if(res.code == 200){
                    this.versionNumVisible = true
                    this.versionNumData = {...res.data}
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        handleSaveVersionNum(){
            const _data = {...this.versionNumData}
            _data.id = ''
            versionSave(_data).then(res=>{
                if(res.code == 200){
                    this.versionNumVisible = false
                    this.versionNumData = {}
                    this.getHistoryList()
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        handleVersionDetail(data){
            versionDetail({
                dictVersionId:data.id
            }).then(res=>{
                if(res.code == 200){
                this.versionData = {...res.data}
                this.addVersionVisible = true
                }else{
                this.$message.error(res.msg)
                }
            })

            DBlist({
                basinId:'',
                stationId:'',
                dbType:'',
                page:1,
                size:500
            }).then(res=>{
                if(res.code == 200){
                    this.databaseVersion = res.data.list
                }
            })
        },
        handleVersionRelease(data){
            this.$confirm(`发布后不可修改，确认要发布版本号为 ${data.versionName} 的版本？`,'提示',{
                type:'warning'
            }).then(() => {
                versionRelease({
                    dictVersionId:data.id
                }).then(res=>{
                    if(res.code == 200){
                        this.$message.success('发布成功！')
                    this.getHistoryList()
                    }else{
                    this.$message.error(res.msg)
                    }
                })
            }).catch(() => {});
        },
        handleVersionDel(data){
          this.$confirm(`确认删除版本号为 ${data.versionName} 的版本？`).then(() => {
            versionDel({
              dictVersionId:data.id
            }).then(res=>{
              if(res.code == 200){
                this.$message.success('删除成功！')
                this.getHistoryList()
              }else{
                this.$message.error(res.msg)
              }
            })
          }).catch(() => {});  
        },
        handleCopyTableMenu(data,index){
            this.editTableMenu = false
            this.versionData.tables.push(JSON.parse(JSON.stringify(data)))
        },
        handleDelTableMenu(index){
          this.versionData.tables.splice(index,1)
          this.currentTab = 0
        },
        handleAddDictionary(data){
            if(data){
              this.editDataID = data.id
              this.dictionaryDialogName = data.name
            }else{
              this.editDataID = ''
            }
            this.dialogNameVisible = true
        },
        handleCloseDictionaryDialog(){
            this.dialogNameVisible = false
            this.dictionaryDialogName = ''
            this.editDataID = ''
        },
        handleSaveNameData(){
            if(this.editDataID != ''){
              DictListEdit({
                id:this.editDataID,
                name:this.dictionaryDialogName
              }).then(res=>{
                if(res.code == 200){
                  this.handleCloseDictionaryDialog()
                  this.getDictListData()
                }else{
                  this.$message.error(res.msg)
                }
              })
            }else{
              DictListAdd({
                name:this.dictionaryDialogName
              }).then(res=>{
                if(res.code == 200){
                  this.handleCloseDictionaryDialog()
                  this.getDictListData()
                }else{
                  this.$message.error(res.msg)
                }
              })
            }
        },
        handleChangeTime1(index,val){
            if(val == 1){
                const data = this.versionData1[this.currentTab1].columns
                data.forEach((item,i) => {
                if(i == index){
                    item.isTime = val
                }else{
                    item.isTime = 0
                }
                });
            }
        },
        handleChangePk(index,val){
          if(val == 1){
            const data = this.versionData.tables[this.currentTab].columns
            data.forEach((item,i) => {
              if(i == index){
                item.isPk = val ? 1 : 0
              }else{
                item.isPk = 0
              }
            });
          }
        },
    }
})
</script>
<style scoped lang="scss">
.dialog-content {
  padding: 10px 0;
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 0 10px;
}

.total-count {
  color: #606266;
  font-size: 14px;
}

.filter-options {
  display: flex;
  align-items: center;
}

.version-table {
  border-radius: 4px;
}

.version-table ::v-deep .el-table__header-wrapper {
  background: #f5f7fa;
}

.version-desc {
  line-height: 1.4;
  word-break: break-word;
}

.version-type {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.version-type.release {
  background: #f0f9eb;
  color: #67c23a;
}

.version-type.draft {
  background: #f4f4f5;
  color: #909399;
}

.update-time {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 12px;
}

.update-time i {
  margin-right: 4px;
}



// 
.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 0 10px;
}

.version-info {
  flex: 1;
}

.version-tag {
  background: #e6f7ff;
  color: #1890ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 10px;
}

.version-name {
  margin: 8px 0 4px 0;
  color: #303133;
  font-size: 18px;
}

.version-desc {
  color: #606266;
  font-size: 14px;
  margin: 0;
  line-height: 1.4;
}

.table-count {
  background: #f0f9ff;
  padding: 8px 12px;
  border-radius: 4px;
  color: #409EFF;
  font-weight: 500;
}

.diction-container {
  display: flex;
  gap: 20px;
  min-height: 450px;
}

.diction-left {
  width: 280px;
  border-right: 1px solid #e6ebf5;
  padding-right: 10px;
}

.table-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 0 5px;
  span{
    font-weight: 600;
    color: #303133;
  }
}

.table-menu {
  max-height: 400px;
  overflow-y: auto;
}

.table-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
}

.table-item:hover {
  background: #f5f7fa;
  border-color: #409EFF;
}

.table-item.active {
  background: #ecf5ff;
  border-color: #409EFF;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.table-icon {
  margin-right: 10px;
  color: #409EFF;
  font-size: 16px;
}

.table-info {
  flex: 1;
  min-width: 0;
}

.table-name {
  font-weight: 500;
  color: #303133;
  font-size: 14px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-name-cn {
  color: #909399;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-columns {
  margin-left: 8px;
}

.diction-right {
  flex: 1;
  min-width: 0;
}

.table-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 0 5px;
}

.current-table-name {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.table-name-cn {
  color: #606266;
  font-weight: normal;
}

.table-stats {
  display: flex;
  gap: 8px;
}

.column-table {
  border-radius: 4px;
}

.column-name {
  font-family: monospace;
  font-weight: 500;
  color: #409EFF;
}

.column-comment {
  line-height: 1.4;
}

.column-attributes {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.column-attributes i {
  color: #67c23a;
  font-size: 14px;
}

.empty-state {
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
}

// 新增数据字典版本
.dialog-content {
  max-height: 68vh;
  overflow-y: auto;
  padding: 0 10px;
}

/* 紧凑版基本信息 */
.basic-info-compact {
  margin-bottom: 15px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
}

.compact-form {
  margin-bottom: 0;
}

.compact-form ::v-deep .el-form-item {
  margin-bottom: 12px;
}

.compact-form ::v-deep .el-form-item__label {
  padding-bottom: 0;
  font-size: 13px;
}

.dict-name {
  font-weight: 500;
  color: #409EFF;
  font-size: 13px;
}

/* 数据区域 */
.data-section {
  margin-top: 5px;
}

.diction-container {
  display: flex;
  gap: 15px;
  min-height: 420px;
}

/* 左侧面板样式 */
.table-list-panel,
.database-select-panel {
  width: 280px;
  border-right: 1px solid #e6ebf5;
  padding-right: 10px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 5px;
  font-size: 13px;
  font-weight: 600;
}

.table-list {
  max-height: 380px;
  overflow-y: auto;
}

.table-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  margin-bottom: 6px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
}

.table-item:hover {
  background: #f5f7fa;
  border-color: #409EFF;
}

.table-item.active {
  background: #ecf5ff;
  border-color: #409EFF;
}

.table-info {
  flex: 1;
  min-width: 0;
}

.table-name {
  font-weight: 500;
  color: #303133;
  font-size: 12px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-desc {
  color: #909399;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-tips {
  padding: 30px 0;
  text-align: center;
  color: #909399;
  font-size: 12px;
}

/* 右侧面板样式 */
.field-management-panel,
.field-preview-panel {
  flex: 1;
  min-width: 0;
}

.field-table {
  border: 1px solid #e6ebf5;
  border-radius: 4px;
}

.empty-panel,
.empty-preview {
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  font-size: 12px;
}

/* 数据库选择样式 */
.select-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.db-select,
.schema-select {
  width: 100%;
}

.tree-panel {
  border: 1px solid #e6ebf5;
  border-radius: 4px;
  padding: 8px;
}

.tree-header {
  font-weight: 500;
  margin-bottom: 8px;
  color: #606266;
  font-size: 12px;
}

.data-tree {
  max-height: 320px;
  overflow-y: auto;
}

::v-deep .el-button--mini{
    padding:6px !important
}

</style>
